<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div class="ddp-box-in">
  <a href="javascript:" class="ddp-btn-popup-close" (click)="closeInfo()"></a>
  <div class="ddp-data-filename"
       [class.ddp-selected]="isDatasetNameEdit"
       (clickOutside)="isDatasetNameEdit ? setDatasetName(): null;">
    <em class="ddp-icon-file-svg">
      <svg-icon-component [name]="prepCommonUtil.getNameForSvgWithDataset(selectedDataSet)" [isBlackAndWhite]="false"></svg-icon-component>
    </em>
    <div class="ddp-ui-input">
      <input type="text" #dsName maxlength="150"
             placeholder="{{'msg.comm.ui.create.name' | translate}}"
             (keyup.enter)="isDatasetNameEdit ? updateDataset() : null;"
             [(ngModel)]="datasetName" />
      <span class="ddp-btn-check" (click)="$event.stopPropagation(); updateDataset();"></span>
    </div>
    <span class="ddp-txt-filename"
          title="{{selectedDataSet.dsName}}">
      {{selectedDataSet.dsName}}
      <a href="javascript:" class="ddp-link-edit"
         (click)="!isDatasetNameEdit ? onDatasetNameEdit($event):$event.stopPropagation();">
        <em class="ddp-icon-edit2"></em>
      </a>
    </span>
  </div>
  <div class="ddp-data-explain" [class.ddp-selected]="isDatasetDescEdit">
    <div class="ddp-ui-input">
      <textarea #dsDesc placeholder="{{'msg.comm.ui.create.desc' | translate}}"
                (clickOutside)="isDatasetDescEdit ? setDatasetDescription(): null;"
                [(ngModel)]="datasetDesc"
                maxlength="150">
      </textarea>
      <span class="ddp-btn-check" (click)="$event.stopPropagation(); updateDataset();"></span>
    </div>

    <span class="ddp-txt-explain" >
      <span *ngIf="selectedDataSet.dsDesc; else notMaxLength"
            title="{{selectedDataSet.dsDesc}}"
            [innerHTML]="getDescriptionWithBR(selectedDataSet.dsDesc)">
      </span>
      <ng-template #notMaxLength>
        <span  [innerHTML]="getDescriptionWithBR(selectedDataSet.dsDesc)"></span>
      </ng-template>
        <a href="javascript:" class="ddp-link-edit"
           (click)="!isDatasetDescEdit ? onDatasetDescEdit($event):$event.stopPropagation();">
        <em class="ddp-icon-edit2"></em>
      </a>
    </span>

  </div>

  <!--[class.ddp-type]="selectedDataSet.dsType && selectedDataSet.dsType.toString() === 'WRANGLED'"-->
  <div class="ddp-ui-databuttons ddp-type">
    <a *ngIf="selectedDataSet.dsType && selectedDataSet.dsType.toString() === 'WRANGLED'" href="javascript:"
       class="ddp-btn-buttons4 ddp-bg-black ddp-full" (click)="onEditRulesBtnClicked()">
      <em class="ddp-icon-edit"></em>{{'msg.dp.btn.edit.rules' | translate}}
    </a>

    <div class="ddp-databuttons ddp-clear" *ngIf="selectedDataSet.dsType && selectedDataSet.dsType.toString()=== 'IMPORTED'">
      <div class="ddp-col-6">
        <a href="javascript:"
           class="ddp-btn-line ddp-full"
           style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"
           title="{{'msg.dp.ui.swap.dataset' | translate }}" (click)="dataSwap('imported')">
          {{'msg.dp.ui.swap.dataset' | translate }}
        </a>
      </div>
      <div class="ddp-col-6">
        <a href="javascript:"
           class="ddp-btn-solid ddp-bg-black ddp-full"
           style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"
           title="{{'msg.dp.btn.new.ds' | translate}}"
           (click)="datasetEventHandler.emit()">
          {{'msg.dp.btn.new.ds' | translate}}
        </a>
      </div>
    </div>

    <!-- 클릭시 ddp-selected 추가 -->
    <div class="ddp-more"
         *ngIf="selectedDataSet.dsType && selectedDataSet.dsType.toString() === 'WRANGLED'"
         [ngClass]="{'ddp-selected':isBtnOptionOpen}" (clickOutside)="isBtnOptionOpen = false"
         style="bottom:-3px;">
      <a href="javascript:" class="ddp-btn-more" (click)="openBtnOptions()"></a>
      <!-- popup -->
      <div class="ddp-wrap-popup2 ddp-types">
        <ul class="ddp-list-popup">
          <li>
            <a href="javascript:" (click)="cloneDataset()">
              <em class="ddp-icon-clone"></em>
              {{'msg.dp.btn.make.copy' | translate }}
            </a>
          </li>
          <li>
            <a href="javascript:" (click)="createSnapshot()">
              <em class="ddp-icon-snapshot"></em>
              {{'msg.dp.ui.create.ss' | translate }}
            </a>
          </li>
          <li>
            <a href="javascript:" (click)="dataSwap('wrangled')">
              <em class="ddp-icon-drop-re"></em>
              {{'msg.dp.ui.change.input.dataset' | translate }}
            </a>
          </li>
        </ul>
      </div>
      <!-- //popup -->
    </div>
    <!-- //more -->
  </div>

  <!-- part -->
  <div class="ddp-wrap-part ddp-bg">
    <!-- 데이터 미리보기 -->
    <div class="ddp-ui-preview">
      <div class="ddp-txt-title">
        {{'msg.dp.ui.data.preview' | translate}}
      </div>

      <div class="ddp-box-preview">
        <div class="ddp-ui-empty" *ngIf="clearGrid">
          {{'msg.dp.ui.no.preview' | translate}}
        </div>
        <div class="ddp-box-gridarea" grid-component style="width:100%; height: 100%;" [hidden]="clearGrid"></div>
      </div>
    </div>

    <dl class="ddp-dl-detail" *ngFor="let item of datasetInformationList">
      <dt>
        {{item.name}}
      </dt>
      <dd>
        {{item.value}}
      </dd>
    </dl>

    <dl class="ddp-dl-detail" *ngIf="selectedDataSet.creatorDfId === dataflow.dfId || selectedDataSet.dsType !== DsType.WRANGLED">
      <dt>
        {{'msg.comm.th.used' | translate}}
      </dt>
      <dd *ngIf="selectedDataSet.dataflows">
        <span class="ddp-data-num" (click)="showDataflows($event);">{{selectedDataSet.dataflows.length}}</span> {{selectedDataSet.dataflows.length === 1 ? 'dataflow' : 'msg.dp.ui.flows' | translate}}
        <!-- popup -->

        <div class="ddp-wrap-popup2 ddp-types2" *ngIf="isDataflowsShow" (clickOutside)="isDataflowsShow = false;">
          <ul class="ddp-list-popup">
            <li *ngFor="let dataflow of selectedDataSet.dataflows" (click)="changeDataflow.emit(dataflow.dfId);isDataflowsShow=false;">
              <a href="javascript:">
                <em class="ddp-icon-flow"></em>
                {{dataflow.dfName}}
              </a>
            </li>
          </ul>
        </div>
        <!-- //popup -->

      </dd>
    </dl>

    <div class="ddp-ui-preview ddp-type-rule" *ngIf="selectedDataSet.dsType && selectedDataSet.dsType === DsType.WRANGLED && selectedDataSet.creatorDfId === dataflow.dfId">
      <div class="ddp-txt-title">
        {{'msg.dp.ui.rule.list' | translate}}
      </div>

      <div class="ddp-box-preview">
        <ul class="ddp-list-rule2" *ngIf="ruleList && 0<ruleList.length">
          <li *ngFor="let rule of ruleList;">
            <em class="ddp-line-before"></em>
            <em class="ddp-line-after"></em>
            <span class="ddp-data-type">
              <em class="ddp-ui-round">{{rule.alias}}</em>
            </span>
            <div class="ddp-ui-code" [ngClass]="{'ddp-error': !rule.valid}">
              {{rule.simplifiedRule}}
            </div>
          </li>
        </ul>
        <div class="ddp-ui-empty" *ngIf="ruleList && 0 === ruleList.length">
          {{'msg.dp.ui.no.rules' | translate}}
        </div>
      </div>
      <span class="ddp-data-rule">{{'msg.dp.ui.rules' | translate :  { value : (ruleList ? ruleList.length : 0) } }}</span>
    </div>
    <!-- //detail -->

  </div>

  <div class="ddp-wrap-date">
    <!-- detail -->
    <dl class="ddp-dl-detail ddp-dl-date">
      <dt>
        {{'msg.comm.th.created.on' | translate}}
      </dt>
      <dd>
        {{selectedDataSet.createdTime | mdate:'YYYY-MM-DD HH:mm'}} by {{selectedDataSet.createdBy?.fullName}}
      </dd>
    </dl>
    <!-- //detail -->
    <!-- detail -->
    <dl class="ddp-dl-detail ddp-dl-date">
      <dt>
        {{'msg.comm.th.updated.on' | translate}}
      </dt>
      <dd>
        {{selectedDataSet.modifiedTime | mdate:'YYYY-MM-DD HH:mm'}} by {{selectedDataSet.modifiedBy?.fullName}}
      </dd>
    </dl>
    <!-- //detail -->
  </div>

</div>

<!-- 링크 -->
<div class="ddp-ui-footbutton" (click)="deleteDataSet();">
  <a href="javascript:" class="ddp-type-link2"><em class="ddp-icon-delete2"></em>{{'msg.dp.ui.data.del' | translate}}</a>

</div>
<!-- //링크 -->
